<template>
<div class='main'>
    <div class='head'>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{path:'/'}">系统设置</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path:'/'}">用户管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path:'/'}">角色管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class='content'>
         <div class='title'>角色管理</div>
        <el-row>
            <el-col :span="12">
                <el-button @click="addInfo({},'add')">添加</el-button>
                <el-button @click='delect()'>删除</el-button>
            </el-col>
            <el-col :span="12">
                <el-input v-model="search" placeholder="">
                 <el-button slot="append" icon="el-icon-search"></el-button>
                 </el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" style='padding:10px;'>
                <span class="spanRow">&nbsp;</span>&nbsp;&nbsp;已选择{{selectItem}}
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table :data="tableData" stripe border sortable>
                <el-table-column type="selection" align="center"></el-table-column>
                <template v-for="item in items">
                  <el-table-column v-if="item.prop!=='roleState'"  :prop="item.prop" :label="item.label" sortable  align="center" :key='item.prop'>
              </el-table-column> 
              <el-table-column v-if="item.prop=='roleState'"  :prop="item.prop" :label="item.label" sortable  align="center" :key='item.prop'>
              <template slot-scope="scope">
                   <span :class="scope.row.roleState === '1' ? 'green' : 'red'">{{changeType(scope.row)}}</span>
                  </template>
              </el-table-column>
                </template> 
              <el-table-column label="操作"  align="center">
                 <template slot-scope="scope">
                  <el-button type="text"  @click="addInfo(scope.row,'modify')">修改</el-button>
                  <el-button type="text" v-if="scope.row.roleState !== '1'"  @click="forbidden(scope.row.id)" style='color:red;'>禁用</el-button>
                  <el-button type="text" v-if="scope.row.roleState === '1'"  @click="enable(scope.row.id)">启用</el-button>
                 </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24">
               <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout=" sizes,total, prev, pager, next, jumper" :total="tableDataInit.length"></el-pagination>
          </el-col>
        </el-row>
    </div>
    </div>
</template>
<script>
export default {
  name: "user_role",
  data() {
    return {
      search: "",
      selectItem: 0,
      tableData:[],
      tableDataInit: [
        {roleId:1,roleName:'测试1',roleDesc:'备注1',roleState:'1'},
        {roleId:2,roleName:'测试2',roleDesc:'备注2',roleState:'2'},
        {roleId:3,roleName:'测试3',roleDesc:'备注3',roleState:'2'},
        {roleId:4,roleName:'测试4',roleDesc:'备注4',roleState:'1'},
        {roleId:5,roleName:'测试5',roleDesc:'备注5',roleState:'1'},
        {roleId:6,roleName:'测试6',roleDesc:'备注6',roleState:'1'},
        {roleId:7,roleName:'测试7',roleDesc:'备注7',roleState:'2'},
        {roleId:8,roleName:'测试8',roleDesc:'备注8',roleState:'1'},
        {roleId:9,roleName:'测试9',roleDesc:'备注9',roleState:'2'},
        {roleId:10,roleName:'测试10',roleDesc:'备注10',roleState:'2'},
        {roleId:11,roleName:'测试11',roleDesc:'备注11',roleState:'2'},
        {roleId:12,roleName:'测试12',roleDesc:'备注12',roleState:'2'}

        ],
      items: [
        { prop: "roleName", label: "角色名称" },
        { prop: "roleDesc", label: "角色描述" },
        { prop: "roleState", label: "启用状态" }
      ],
      currentPage: 1,
      pageSize:5
    };
  },
  mounted() {
    this.tableData = this.tableDataInit.slice(0,5)
  },
  methods: {
      handleSizeChange(val) {
        this.tableData = this.tableDataInit.slice(0,val)
      },
      handleCurrentChange(val) {
        this.tableData = this.tableDataInit.slice((val-1)*this.pageSize,val*this.pageSize)
      },
      changeType(val){
         if(val){
            let value= val.roleState==1?'已启用':'已禁用'
         return value
         }
      },
      addInfo(object,type) {
       this.$router.push({path:'/roleInfo',query:{data:Object.assign({},object),typeId:type}})
      },
      delect() {
      },
      forbidden(id) {},
      enable(id) {}
    },
};
</script>
<style lang="scss">
.main{
padding: 10px 20px;
}
.title{
    font-size: 20px;
    font-weight: 600;
    margin: 10px;
}
.spanRow{
    width:5px;
    background-color: blue;
}
.red{
  color:red;
}
.green{
  color:green;
}
</style>

